<template>
  <div class="header">
    <div class="logo">校园微博</div>
    <div class="center">
      <div
        @click="$router.push('/')"
        class="center-item iconfont icon-home"
      >首页</div>
      <div
        @click="$router.push('/focus')"
        class="center-item iconfont icon-guanzhu"
      >好友动态</div>
      <div
        @click="$router.push(`/space/${$store.state.userInfo.id}`)"
        class="center-item iconfont icon-mn_kongjian_fill"
      >空间</div>
      <div class="search">
        <input
          class="search-input"
          placeholder="搜索"
          type="text"
        />
        <i class="iconfont icon-sousuo"></i>
      </div>
    </div>
    <div class="right">
      <div
        @click="loginRegister(0)"
        class="login"
        v-if="!isLogin"
      >登录</div>
      <div
        @click="loginRegister(1)"
        class="register"
        v-if="!isLogin"
      >注册</div>
      <div
        class="setting"
        v-if="isLogin"
      >
        <img
          :src="$store.state.userInfo.avatar"
          @click="$router.push('/setting')"
          alt="用户头像"
          class="avatar"
          title="个人主页"
        />
      </div>
      <!-- <div class="wirte"
      >写微博</div> -->
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, ref } from "vue";
export default {
  name: "HeaderTop",
  components: {},
  setup() {
    const { ctx } = getCurrentInstance();
    const isLogin = ref(false);
    isLogin.value = ctx.$store.state.userInfo.id ? true : false;
    // 跳转登录或注册
    const loginRegister = (type) => {
      ctx.$router.push(type === 0 ? "/login" : "register");
    };

    return {
      isLogin,
      loginRegister,
    };
  },
};
</script>

<style scoped lang='stylus' >
.header
  height 56px
  background-color #007bff
  display flex
  padding 0 10% 0 0
  justify-content space-between
  text-align center
  line-height 56px
  color #fff

  .logo
    width 15%
    font-size 24px
    font-weight bold
    font-family '华文楷体'
    cursor pointer

  .center
    flex 1
    display flex

    .center-item
      margin-right 3%
      color rgba(255, 255, 255, 0.5)

    .center-item:hover
      color rgba(255, 255, 255, 1)
      cursor pointer

    .search
      .search-input
        height 34px
        outline none
        background-color rgba(255, 255, 255, 1)
        border none
        border-radius 17px
        text-indent 17px
        width 160px
        transition 0.5s

      .search-input::placeholder
        color #999
        font-size 15px

      .search-input:focus
        width 220px
        transition 0.5s

      .icon-sousuo
        margin-left -30px
        color #999
        cursor pointer

  .right
    display flex

    div
      margin-left 30px
      cursor pointer

    div:hover
      color rgba(255, 255, 255, 0.5)

.avatar
  width 38px
  height 38px
  border-radius 50%
</style>  